<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>History API</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./modern.css">
    <link href="./modern-responsive.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
    <script src="./h5utils.js"></script></head>
        <script>
          var data = { 
            Apple : {
              name: "Apple",
              location: "http://apple.com/"
            },
            Google: {
              name: "Google",
              location: "http://google.com/"
            },
            Microsoft: {
              name: "Microsoft",
              location: "http://microsoft.com/ "
            },
            Facebook: {
              name: "Facebook",
              location: "http://facebook.com/"
            }
          };
    </script>
 
  </head>
  <body>
    <header>
      <div id="imglogo"></div>
      <div id="titrelogo">IOBH</div>
    </header>
        <div id="contenair" style="height: auto; display:block;width:100px;margin:auto;padding-top:20px;">
    <article>
  <p id="status">L'API History est indisponible sur ce browser.</p>
  <ul id="examples">
    <li><a href="./Apple">Apple</a></li>
    <li><a href="./Google">Google</a></li>
    <li><a href="./Microsoft">Microsoft</a></li>
    <li><a href="./Facebook">Facebook</a></li>
  </ul>
  <div id="output"></div>
</article>
<script>
var $ = function (s) { return document.getElementById(s); },
    state = $('status'),
    urlhistory = $('urlhistory'),
    examples = $('examples'),
    output = $('output'),
    template = 'Nom de l\'entreprise : <strong>{name}</strong> <br />homepage : <strong>{location}</strong></p>';


function reportData(data) {
  output.innerHTML = template.replace(/(:?\{(.*?)\})/g, function (a,b,c) {
    return data[c];
  });
}

if (typeof history.pushState === 'undefined') {
  state.className = 'fail';
} else {
  state.className = 'success';
  state.innerHTML = 'L\'API history est detectée. <br /> <br />Cliquez sur un nom d\'entreprise. <br />Merci.';
}

addEvent(examples, 'click', function (event) {
  var title;
  
  event.preventDefault();
  if (event.target.nodeName == 'A') {
    title = event.target.innerHTML;
    data[title].url = event.target.getAttribute('href'); 

    history.pushState(data[title], title, event.target.href);
    reportData(data[title]);
  }
});

addEvent(window, 'popstate', function (event) {
  var data = event.state;
  reportData(event.state || { url: "", name: "", location: "" });
});
</script>
</div>
  <footer>
    © 2012 Honoré & Giovanetti.
  </footer>
  </body>
</html>